<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="80%" style="height: 80vh">
    <el-tabs tab-position="top" @tab-click="handleTabClick" v-model="activeTab">
      <el-tab-pane label="基本信息" name="device">
        <DeviceInfo :device="device" />
      </el-tab-pane>
      <el-tab-pane label="驱动信息" name="geteway">
        <DeviceGateway v-if="activeTab === 'geteway'" :device="device" />
      </el-tab-pane>
      <el-tab-pane label="历史报表管理" name="history">
        <Subscribewater v-if="activeTab == 'history'" :device="device" />
      </el-tab-pane>

      <el-tab-pane label="设备二维码" name="qrcode">
        <DeviceInfoQR v-if="activeTab == 'qrcode'" :device="device" />
      </el-tab-pane>
    </el-tabs>
  </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import DeviceInfo from './DeviceInfo.vue'
import DeviceGateway from './DeviceGateway.vue'
import Subscribewater from '@/views/mqtt/subscribewater/index.vue'

import DeviceInfoQR from './DeviceInfoQR.vue'

const dialogTitle = ref('')
const dialogVisible = ref(false)
const device = ref<any>()
const activeTab = ref('device') // 默认显示基本信息
const open = async (row: any) => {
  console.log('row', JSON.stringify(row))
  dialogVisible.value = true

  dialogTitle.value = row.deviceName
  device.value = row
  console.log('device.value:', JSON.stringify(device.value))
  activeTab.value = 'device'
  // nextTick(() => {
  //   device.value = row
  // })
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const handleTabClick = (tab: any, event: Event) => {
  // 更新 activeTab 的值
  activeTab.value = tab.props.name
  console.log('切换到:', activeTab.value)
}
</script>

<style scoped>
.custom-dialog {
  /* 水平居中 */
  margin-left: auto;
  margin-right: auto;
  /* 距离底部 20px */
  margin-bottom: 20px;
  /* 垂直居中 */
  top: 50%;
  transform: translateY(-50%);
  /* 确保对话框在屏幕中间 */
  position: fixed;
  left: 50%;
  transform: translate(-50%, -50%);
  height: calc();
}
</style>
